<template>
 <div>
  御剑乘风来,除魔天地间!
  <hr/>
  <!-- <h1 v-focus="val"></h1> -->
  <input type="text" v-focus>

  <h1 v-ff="fVal">我是一个自定义的指令</h1>
  <hr/>
  <ul>
    <li v-for="item in  list" :key="item.id">
      <img style="width:200px" :src="item.img" alt="">
      {{ item.title }}
    </li>
  </ul>

  <!-- <div v-loading="list.length==0"></div> -->
  <hr/>  <hr/>
  <!-- 图片加载失败的场景 -->
  <img v-errorImg="defaultImg" style="width:200px" src="http://ajax-api.itheima.net/images1/0.webp" alt="">
  <!-- <img v-errorImg="'http://ajax-api.itheima.net/images/4.webp'" style="width:200px" src="http://ajax-api.itheima.net/images/0.webp" alt=""> -->
 </div>
</template>
<script>
/* 图片也是需要当成模块来导入 */
import defaultImg  from  './assets/logo.png'
// import axios  from  'axios'
export default{
    name:'',
    data () {
        return {
          val:'我是一个自定义指令 v-focus',
          fVal:'我是一个h1',
          list:[],
          defaultImg
        }
    },
    directives:{
      ff:{
        inserted(el,binding){
          // console.log(el,binding.value,6666);
          el.innerHTML=binding.value
        }
      },
      loading:{
        inserted(el,binding){
          /* 当前dom 插入到dom树中完成之后执行的钩子函数 ====插入*/
          console.log(el,binding.value,1111);
          // el.innerHTML=binding.value
          /* 添加一个类名 */
          el.classList.add('active')
          el.innerHTML='正在加载中。。。'
        },
        update(el,binding){
          console.log(el,binding.value,2222);
          /* 使用指令的元素更新了数据就执行 */
          console.log(el,binding.value,'1111222');
          // 加载效果影藏
         setTimeout(()=>{
          if(!binding.value){
            el.style.display='none'
          }
         },3000)
        }
      },
      errorImg:{
        inserted(el,binding){
          console.log(el,binding,777888);
          // el.onclick=function(){
          //   console.log(123);
          // }
          /* 元素加载失败就会触发 */
          el.onerror=function(){
            console.log(binding.value,1234);
            el.src=binding.value
          }
          // el.addEventListener('error',()=>{})
        }
      }
    },
    created () {

      this.getNews()
    },
    computed:{
    },
    methods:{
      async getNews(){
       const  res=await this.$axios.get('http://hmajax.itheima.net/api/news')
       console.log(res,999);
       this.list=res.data.data
      }
    }
}
</script>
<style lang='less'  scoped>
 .active{
  width: 100vw;
  height: 100vh;
  background:rgba(158, 156, 156, 0.8);
  z-index:999;
  position: fixed;
  top: 0;
  left:0;
  text-align: center;
  line-height: 100vh;
 }
</style>